// @ts-ignore
import React, {useEffect, useState} from 'react';
import {Outlet, useLocation, useNavigate} from 'react-router-dom';
import {getUserInfo} from '../../util/userinfo';
import {
    Award,
    ChevronRight,
    FileText,
    FolderKanban,
    Image,
    LayoutDashboard,
    LogOut,
    Menu,
    MessageSquare,
    Settings,
    Shield,
    Users,
} from 'lucide-react';

const menuItems = [
    {
        icon: <LayoutDashboard className="w-5 h-5"/>,
        label: '仪表盘',
        path: '/admin'
    },
    {
        icon: <FolderKanban className="w-5 h-5"/>,
        label: '训练分类',
        path: '/admin/categories',
        permission: 'training.manage'
    },
    {
        icon: <FileText className="w-5 h-5"/>,
        label: '培训订单',
        path: '/admin/training-orders'
    },
    {
        icon: <Users className="w-5 h-5"/>,
        label: '用户管理',
        path: '/admin/users',
        permission: 'user.manage'
    },
    {
        icon: <MessageSquare className="w-5 h-5"/>,
        label: '评论管理',
        path: '/admin/comments',
        permission: 'comment.manage'
    },
    {
        icon: <Image className="w-5 h-5"/>,
        label: '媒体库',
        path: '/admin/media',
        permission: 'media.manage'
    },
    {
        icon: <Award className="w-5 h-5"/>,
        label: '勋章管理',
        path: '/admin/medals',
        permission: 'medal.manage'
    },
    {
        icon: <Shield className="w-5 h-5"/>,
        label: '权限管理',
        path: '/admin/roles',
        permission: 'role.manage'
    },
    {
        icon: <Settings className="w-5 h-5"/>,
        label: '系统设置',
        path: '/admin/settings',
        permission: 'setting.manage'
    }
];

export default function AdminLayout() {
    const navigate = useNavigate();
    const location = useLocation();
    const [isSidebarOpen, setIsSidebarOpen] = useState(true);
    const userInfo = getUserInfo();

    const toggleSidebar = () => {
        setIsSidebarOpen(!isSidebarOpen);
    };

    useEffect(() => {
        if (!userInfo) {
            console.log('当前为未登录状态');
            navigate('/')
        }
    }, []);

    return (
        <div className="min-h-screen bg-gray-100">
            {/* 侧边栏 */}
            <aside
                className={`fixed top-0 left-0 h-full bg-white shadow-lg transition-all duration-300 z-30 
          ${isSidebarOpen ? 'w-64' : 'w-20'}`}
            >
                <div className="flex items-center justify-between h-16 px-4 border-b">
                    {isSidebarOpen ? (
                        <h1 className="font-bold text-xl text-blue-600">团练宝后台</h1>
                    ) : (
                        <div className="w-full flex justify-center">
                            <div className="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center">
                                <span className="text-blue-600 font-bold">团</span>
                            </div>
                        </div>
                    )}
                    <button
                        onClick={toggleSidebar}
                        className="p-2 rounded-lg hover:bg-gray-100 transition-colors"
                    >
                        {isSidebarOpen ? (
                            <Menu className="w-6 h-6 text-gray-600"/>
                        ) : (
                            <ChevronRight className="w-6 h-6 text-gray-600"/>
                        )}
                    </button>
                </div>

                <nav className="p-4">
                    <ul className="space-y-2">
                        {menuItems.filter(item => (item.permission && userInfo.role?.permission.includes(item.permission)) || !item.permission || userInfo.realname == '超级管理员').map((item) => (
                            <li key={item.path}>
                                <button
                                    onClick={() => navigate(item.path)}
                                    className={`w-full flex items-center px-4 py-3 rounded-lg transition-colors
                    ${location.pathname === item.path
                                        ? 'bg-blue-50 text-blue-600'
                                        : 'text-gray-600 hover:bg-gray-50'
                                    }`}
                                >
                                    <div className={`flex items-center ${!isSidebarOpen && 'justify-center w-full'}`}>
                                        {item.icon}
                                        {isSidebarOpen && <span className="ml-3">{item.label}</span>}
                                    </div>
                                </button>
                            </li>
                        ))}
                    </ul>
                </nav>

                <div className="absolute bottom-0 left-0 right-0 p-4 border-t">
                    <button
                        onClick={() => {
                            localStorage.removeItem('token_tlb')
                            localStorage.removeItem('userinfo_tlb')
                            navigate('/')
                        }}
                        className={`w-full flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-lg transition-colors
                      ${!isSidebarOpen && 'justify-center'}`}
                    >
                        <LogOut className="w-5 h-5"/>
                        {isSidebarOpen && <span className="ml-3"><span
                            style={{color: 'blue', fontSize: '15px'}}>{userInfo?.realname}</span>，退出登录</span>}
                    </button>
                </div>
            </aside>

            {/* 主内容区 */}
            <main className={`transition-all duration-300 ${isSidebarOpen ? 'ml-64' : 'ml-20'}`}>
                <div className="p-6">
                    <Outlet/>
                </div>
            </main>
        </div>
    );
}